<template>
  <div class="home">
    <i class="el-icon-edit"></i>
    <i class="el-icon-share"></i>
    <i class="el-icon-delete"></i>
    <i class="el-icon-loading"></i>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>

    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="success" plain>朴素成功按钮</el-button>
      <el-button type="success" round>圆角成功按钮</el-button>
      <el-button
        type="success"
        icon="el-icon-check"
        circle
        disabled
      ></el-button>
      <el-button type="info" circle icon="el-icon-message" disabled></el-button>
    </el-row>
    <el-row>
      <el-button type="primary" icon="el-icon-edit"></el-button>
      <el-button type="success" icon="el-icon-share"></el-button>
      <el-button type="info" icon="el-icon-delete"></el-button>
      <el-button type="warning" icon="el-icon-search">搜索</el-button>
      <el-button type="danger"
        >上传<i class="el-icon-upload el-icon--right"></i
      ></el-button>
    </el-row>

    <el-row>
      <el-button-group>
        <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
        <el-button type="success"
          >下一页 <i class="el-icon-arrow-right"></i
        ></el-button>
      </el-button-group>

      <el-button-group>
        <el-button type="primary" icon="el-icon-edit"></el-button>
        <el-button type="success" icon="el-icon-share"></el-button>
        <el-button type="info" icon="el-icon-delete"></el-button>
      </el-button-group>
    </el-row>

    <el-row>
        <el-button type="primary" :loading="true">加载中</el-button>
    </el-row>

    <el-row>
      <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
      <el-link type="primary">主要链接</el-link>
      <el-link type="success">成功链接</el-link>
      <el-link type="warning">警告链接</el-link>
      <el-link type="danger">危险链接</el-link>
      <el-link type="info">信息链接</el-link>
    </el-row>

    <el-row>
      <div>
        <el-link :underline="false">无下划线</el-link>
        <el-link :underline="true">有下划线</el-link>
      </div>
      <div>
        <el-link icon="el-icon-edit">编辑</el-link>
        <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
        <el-link href="http://www.baidu.com">百度<i class="el-icon-view el-icon--right"></i> </el-link>
      </div>
      <div>
        <el-radio v-model="radio" label="1" border>备选项</el-radio>
        <el-radio v-model="radio" label="2" border>备选项</el-radio>
      </div>
      <el-radio-group v-model="radio">
        <el-radio :label="3" border>备选项1</el-radio>
        <el-radio :label="4" border>备选项2</el-radio>
        <el-radio :label="5" border>备选项3</el-radio>
      </el-radio-group>
      <div>
      <el-radio-group v-model="radio1">
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio2" size="medium">
          <el-radio-button label="上海" ></el-radio-button>
          <el-radio-button label="北京"></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio3" size="small">
          <el-radio-button label="上海"></el-radio-button>
          <el-radio-button label="北京" disabled ></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio4" disabled size="mini">
          <el-radio-button label="上海" ></el-radio-button>
          <el-radio-button label="北京"></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </div>
    </el-row>
    <el-row>
      <el-checkbox v-model="checked">备选项</el-checkbox>

      <el-checkbox-group v-model="checkList">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>
        <el-checkbox label="复选框 C"></el-checkbox>
        <el-checkbox label="禁用" disabled></el-checkbox>
        <el-checkbox label="选中且禁用" disabled></el-checkbox>
      </el-checkbox-group>
    </el-row>

    <el-row>
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
      </el-checkbox-group>
    </el-row>

    <div class="demo-input-suffix">
      属性方式：
      <el-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="input1">
      </el-input>
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="input2">
      </el-input>
    </div>
    <div class="demo-input-suffix">
      slot 方式：
      <el-input
        placeholder="请选择日期"
        v-model="input3">
        <i slot="suffix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <el-input
        placeholder="请输入内容"
        v-model="input4">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <el-input
      type="textarea"
      :rows="2"
      placeholder="请输入内容"
      v-model="textarea">
    </el-input>
    
    <el-select v-model="value1" multiple  placeholder="请选择" clearable>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <el-select v-model="value2" multiple collapse-tags placeholder="请选择" clearable>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    
    <el-select v-model="value3" placeholder="请选择"  >
      <el-option
        v-for="item in cities"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      </el-option>
    </el-select>

    <el-switch
      v-model="value2"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>

    <el-switch
      v-model="value3"
      active-text="按月付费"
      inactive-text="按年付费">
    </el-switch>
    <el-switch
      style="display: block"
      v-model="value4"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="按月付费"
      inactive-text="按年付费">
    </el-switch>


  </div>
</template>

<script>
const cityOptions=['上海','北京','广州','深圳'];
export default {
  name: "home",
  data(){
    return {
      radio:'1',
      radio1:'上海',
      radio2:'上海',
      radio3:'上海',
      radio4:'上海',
      checked:true,
      checkList:['选中且禁用','复选框A'],
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      textarea:'',
      options:[{
        value:'选项1',
        label:'黄金港'
      },{
        value:'选项2',
        label:'双皮奶'
      },{
        value:'选项3',
        label:'蚵仔煎'
      },{
        value:'选项4',
        label:'龙须面'
      },{
        value:'选项5',
        label:'北京烤鸭'
      }],
      value1:'',
      value2:'',
       cities: [{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }],
        value3: '',
        value4:''
    };
  },
  methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
};
</script>

<style lang="less" scoped>
    *{
      user-select: none;
    }
</style>

